<template>
  <div class="app-container orderDetail ">
       <div  class="type">
          <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{path:'/order/orderList'}" style="font-size: 16px;color: #262626;">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path:'/order/orderList'}" style="font-size: 12px;color: #777777 !important;line-height:52px">订单列表</el-breadcrumb-item>
                <el-breadcrumb-item style="font-size: 12px;color: #777777 !important;line-height:52px">订单详情</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
       <div class="header clearfloat">
            <div class="red"></div>
            <div class="left">
                <p class="big">当前订单状态：{{detailData.status==10?'待付款':detailData.status==20?'待出行':detailData.status==30?'已成交':detailData.status==40?'已取消':'已退款'}}</p>

                <p class="smail" v-if="detailData.status==10">用户需在{{detailData.payEndTime |changeTimeGe }}前完成支付，否则订单将自动取消</p>

                <p class="smail" v-if="detailData.status==50">管理员（13817179256）在{{detailData.updatedTime|changeTimeGe }}操作退款</p>
                <p class="smail" v-if="detailData.status==40">取消原因：用户在有效期内未完成付款</p>
                <p class="smail" v-if="detailData.status==50">退款原因：{{detailData.refundReason}}</p>
            </div>
            <div class="right" v-if="detailData.status==20">
               <div class="refund" @click="orderMonery">订单退款</div>
               <div class="writeOff" @click="writeOff">订单核销</div>
            </div>
       </div>
       <div class="detailFont">
           <p>订单详情</p>
           <div class="redFont"></div>
       </div>
       <div class="navDetail">
           <div class="top">
              <ul class="ul clearfloat">
                <li class="li" v-if="detailData.createdTime">
                  <span class="fontAll" >
                    <span class="font">下单时间：</span>
                    <span class="date">{{detailData.createdTime |changeTimeGe }}</span> 
                  </span>
                  <p class="shuLie"></p>
                </li>
                <li class="li" v-if="detailData.paidTime">
                  <span class="fontAll" >
                    <span class="font">付款时间：</span>
                    <span class="date">{{detailData.paidTime |changeTimeGe }}</span> 
                  </span>
                  <p class="shuLie"></p>
                </li>
                <li class="li" v-if="detailData.finishTime">
                  <span class="fontAll">
                    <span class="font">成交时间：</span>
                    <span class="date">{{detailData.finishTime |changeTimeGe}}</span> 
                  </span>
                  <p class="shuLie"></p>
                </li>
                 <li class="li" v-if="detailData.sn">
                  <span class="fontAll">
                    <span class="font">订单编号：</span>
                    <span class="date">{{detailData.sn }}</span> 
                  </span>
                  
                </li>
              </ul>
           </div>
          <div class="tableHeader clearfloat">
               <div class="tableLi tableHeaderDetail">商品信息</div>
                <div class="tableLi tableHeaderPrice">商品单价</div>
               <div class="tableLi tableHeaderStatus">数量</div>
               <div class="tableLi tableHeaderDate">出行日期</div>
               <div class="tableLi tableHeaderPrefer">优惠</div>
               <div class="tableLi tableHeaderHandle">实付款</div>
           </div>
           <div class="table clearfloat">
              <!-- 缩略图 -->
              <div class="tableDiv HeaderImg" @click="goShopDetail">
                <img v-if="detailData.picAttachDetail" :src="detailData.picAttachDetail.fileUrl" />
                <img v-else src="https://cdn.yueyangshuyuan.com/%E4%BC%9A%E5%91%98%E5%8D%A1%E7%89%87.png" />
              </div>
              <!-- 商品基本信息 -->
              <div class="tableDiv HeaderDetail" @click="goShopDetail">
                    <div class="topList clearfloat">
                        <h3>{{detailData.merchTitle}}</h3>
                    </div>
                    <!-- <p class="fontDetail" v-html="detailData.merchDesc"></p> -->
              </div>
              <!-- 商品价格 -->
              <div class="tableDiv HeaderPrice" ref="HeaderPrice">
                  <div class="PriceList">
                    <span>¥</span>
                    <span class="price">{{detailData.merchPrice}}</span>
                    <span class="pd">元/人</span>
                  </div>
              </div>
              <!-- 数量 -->
              <div class="tableDiv HeaderStatus" ref="HeaderStatus">
                  <div class="tableDiv HeaderStatus" ref="HeaderStatus">
                      <p class="miueList">{{detailData.merchCount}}</p>
                  </div>
              </div>

             <!--可用日期  -->
              <div class="tableDiv HeaderDate" ref="HeaderDate">
                    <span>{{detailData.merchEffectDate |changeTimeGe}}</span><br/>
              </div>
              <!--可用优惠  -->
              <div class="tableDiv HeaderPrefer clearfloat" ref="HeaderPrefer">
                  <!-- <div v-for="(item,index) in getMerchType(detailData.merchSales)" class="prefer-con" :key=index>
                      <img src="../../img/111111.png"/>
                      <div class="PreferList" >{{item}}</div>
                  </div> -->
                  <p class="miueList" style="width:160px;text-align:center;">{{detailData.discounted}}元</p>
              </div>

               <div class="tableDiv HeaderHandle" ref="HeaderHandle">
                  <div class="tableDiv HeaderHandle" ref="HeaderHandle">
                      <p class="miueList">{{detailData.transPrice}}</p>
                      <!-- transPrice -->
                  </div>
              </div>

          </div>
          <div class="buyMessage">
            <p class="big">买家信息</p>
            <div class="font clearfloat">
              <div class="leftList">
                  <span class="left">用户名：</span>
                  <span class="right blur" @click="goDetail">{{detailData.creatorName }}</span>
              </div>
              <div class="leftList">
                  <span class="left">手机号：</span>
                  <span class="right">{{detailData.creatorPhone}}</span>
              </div>
            </div>
            <div class="font clearfloat">
              <div class="leftList">
                  <span class="left">支付方式：</span>
                  <span class="right">微信支付</span>
              </div>
              <div class="leftList">
                  <span class="left">支付交易号：</span>
                  <span class="right">{{detailData.thirdTransId }}</span>
              </div>
            </div>
       </div>
       <div class="buyMessage buyMessageFa">
          <p class="big">出行信息</p>
          <div class="font clearfloat">
            <div class="leftList">
                <span class="left">联系人：</span>
                <span class="right">{{detailData.contactName}}</span>
            </div>
            <div class="leftList">
                <span class="left">手机号：</span>
                <span class="right">{{detailData.contactPhone}}</span>
            </div>
          </div>
          <div class="font clearfloat"  v-for="(item,index) in detailData.orderTourists" :key=index>
            <div class="leftList">
                <span class="left">出游人：</span>
                <span class="right">{{item.name}}</span>
            </div>
            <div class="leftList">
                <span class="left">证件类型：</span>
                <span class="right">{{item.cardType==1?'身份证':item.cardType==2?'护照':item.cardType==3?'港澳通行证':item.cardType==4?'台胞证':item.cardType==5?'台湾通行证':'回乡证'}}</span>
            </div>
             <div class="leftList">
                <span class="left">证件号码：</span>
                <span class="right">{{item.cardNo}}</span>
            </div>
          </div>
       </div>
    </div>
    <my-orderWriteOff :dialogData="dialogData" @writeOffFlaseFun=writeOffFlaseFun :id=id></my-orderWriteOff>
    <my-orderMoney :dialogData="dialogData" :id=id @sumitHandleFlaseFun=sumitHandleFlaseFun></my-orderMoney>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate} from '@/utils/index.js'
import orderWriteOff from "../../components/order/index.vue"
import orderMoney from "../../components/order/indexMonery.vue"
export default {
  components: {
    "my-orderWriteOff":orderWriteOff, 
    "my-orderMoney":orderMoney
  },
  data() {
    return {
      dialogData:{
         dialogVisible:false,
         dialogVisibleM:false,
      },
       id:this.$route.params.id,

       merchSaleType:[],
       shelfStatus:[],
       selectShelfStatus:[{
         code:'',
         desc:'不限'
       }],
       sales:[2, 1, 3],
       detailData:{},
    }
  },
  created() {
    this.init();
  },
  mounted() {
     
  },

  methods: {
    //跳转到商品详情页面
    goShopDetail(){
      this.$router.push({
          path:'/project/shopList/detailShop',
          name:'detailShop',
          params:{
              id:this.detailData.merchId,
          },
      })
    },
    //跳转用户详情页面
    goDetail(){
        this.$router.push({
          path:'/project/userManager/userDetail',
          name:'userDetail',
          params:{
              id:this.detailData.creator
          },
        });
    },
    orderMonery(){
       this.dialogData.dialogVisibleM=true;
    },
    writeOff(){
        this.dialogData.dialogVisible=true;
    },
    writeOffFlaseFun(){
      this.dialogData.dialogVisible=false;
      this.init();
    },
    sumitHandleFlaseFun(index){
      this.dialogData.dialogVisibleM=false;
      if(index){//提交完成刷新列表
         this.init();
      }
    },
     init(){
       api.enumsAll({},{
          headers: {
              'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(json => {
          if(json){
              this.shelfStatus = json.shelfStatus;
              this.selectShelfStatus = this.selectShelfStatus.concat(json.shelfStatus);
              this.merchSaleType = json.merchSaleType;
               api.orderDetail({},this.id,{
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
              }).then(json => {
                if(json){
                  //  console.log(json);
                  // json.status=30;
                  this.detailData=json;
                }
              });
           }
        });

      
     },
     getMerchType(sales){//获取优惠活动
          let arr = [];
          this.merchSaleType.length && this.merchSaleType.map((item,index)=>{
            if(sales==null){
                sales=[];
            }
            sales.forEach((tp,i)=>{
              if(item.code == tp){
                arr.push(item.desc);
              }
            })
          })
          return arr;
      },
  },
  filters: {
        changeTimeGe(time){
            let date=FormatDate(new Date(Number(time)), 'yyyy-MM-dd hh:mm');
            return date;
        },
   }
}
</script>
<style lang="scss">
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}

.textarea .el-textarea__inner{ 
  resize: none;
  height: 150px;
}
/* .detailImgList .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
   white-space: nowrap;
} */
.app-container .el-form-item.is-success .el-input__inner:focus,.app-container .el-form-item.is-success .el-textarea__inner:focus,.app-container .el-input.is-active .el-input__inner,.app-container .el-input__inner:focus {
  border: 1px solid #FF6A00 !important;
  border-color:#FF6A00 !important;
      background-color: #fff !important;
    background: #fff !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color:#FC612A !important;
  border-color:#FC612A !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label,.el-textarea__inner:focus,.el-textarea__inner:focus {
  color:#FC612A !important;
}
.orderDetail {
  .el-breadcrumb{
    height:52px;
    line-height:52px;
  }
}
</style>
<style lang="scss" scoped>
  div {
    box-sizing:border-box;
  }
  .app-container {
    padding:16px 24px 35px;
    font-size: 14px;
  }
  .orderDetail {
     .type {
         padding:0px 30px 10px 0px;
         height:52px;
         line-height:52px;
     }
     .header {
       padding:20px 24px;
       background: #F4F5F8;
       position: relative;
       .red {
         width:3px;
         height:20px;
         background: #FC612A;
         position: absolute;
         left:0;
         top:22px;
       }
       .left{
         float: left;
         min-height:50px;
         width:calc(100% - 300px);
         .big {
           font-size: 18px;
           color: #262626;
           height:30px;
           line-height:20px;
           font-weight:700;
         }
         .smail {
           font-size: 14px;
           color: #A9A9A9;
           margin-top:5px;
         }
       }
       .right {
         float: right;
         width:300px;
         height:50px;
         .refund,.writeOff {
            float: right;
            width:96px;
            height:36px;
            background: #FFFFFF;
            border: 1px solid #DDDDDD;
            border-radius: 4px;
            margin-right:16px;
            text-align:center;
            line-height:36px;
            font-size: 14px;
            color: #262626;
            margin-top:7px;
            cursor: pointer;
         }
       }
     }
     .detailFont {
       margin-top:20px;
       position: relative;
       height:30px;
       p {
         padding-left:20px;
         box-sizing:border-box;
         font-size: 14px;
         color: #262626;
       }
       .redFont {
           position: absolute;
           width:36px;
           height:2px;
           background: #FC612A;
           bottom:0;
           left:30px;
       }
     }
     .navDetail {
       border: 1px solid #E9E9E9;
       margin-bottom:20px;
      //  height:400px;
       .top {
          width:100%;
          // height:32px;
          background: #F5F5F7;
          padding:8px 15px;
          .ul {
            .li {
                 width:20%;
                 float: left;
                 margin-right:30px;
                 .fontAll {
                   float: left;
                    .font {
                      font-size: 12px;
                      color: #777777; 
                    }
                    .date {
                        font-size: 12px;
                        color: #262626;
                    }
                 }
                 .shuLie {
                   float: left;
                   width:1px;
                   height:14px;
                   margin:1px 0 1px 20px;
                   background:rgba(119,119,119,0.5);
                 }
            }
          }
       }
      .buyMessage {
          border-bottom: 1px solid #E9E9E9;
          margin:0 16px;
          margin-bottom:20px;
          box-sizing:border-box;
          .big {
            font-size: 14px;
            color: #262626; 
            margin-bottom:15px;
          }
          .font {
            .leftList {
              float: left;
              width:300px;
              margin-bottom:15px;
              .left {  
                  font-size: 12px;
                  color: #777777;
              }
              .right {
                font-size: 12px;
                color: #262626;
              }
              .blur {
                font-size: 12px;
                color: #25A7FD;
                cursor: pointer;
              }
            }
          }
        }
        .buyMessageFa {
           border-bottom:none;
        }
     }

     .table {
            padding: 14px 16px;
            margin:14px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            border:1px solid #E9E9E9;
            border-radius:2px;
            // align-items: center;
            .tableDiv {
              float: left;
              margin-left:20px;
              .miueList {
                float: left;
                width:60px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #333;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              img{
                width: 120px;
                height: 86px;
                background: #ccc;

              }
            }
            .HeaderDetail {
              width:calc(100% - 850px);
              .topList {
                 h3 {
                  //  float: left;
                  //  max-width:calc(100% - 80px);
                   overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    font-size: 14px;
                    color: #262626;
                    // margin: 0 auto;
                    // text-align: center;
                 }
              }
              .fontDetail {
                // float: left;
                // width: calc(100% - 120px);
                // margin: 0 auto;
                // text-align: center;
                max-height:70px;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:3;
                overflow: hidden;
                color: #777777;
                font-size:12px;
                margin-top:12px;
                line-height: 18px;
              }
            }
            .HeaderStatus{
                color:#333;
            }
            .HeaderPrice {
              position: relative;
              width: 130px;
              height: 105px;
              // line-height: 105px;
              text-align: center;
              .PriceList {
              text-align: center;
                span {
                  font-size: 12px;
                  color: #FC612A;
                  font-weight: 700;
                  &:first-child{
                    font-size: 14px;
                  }
                }
                .pd{
                  font-size: 12px;
                  color: #262626;
                }
                .price {
                  font-size: 18px;
                  color: #FC612A;
                  font-weight: 700;
                }
              }
            }
            .HeaderPrefer {
              // display: -webkit-box;
              // display: -ms-flexbox;
              // display: flex;
              // -webkit-box-align: center;
              // -ms-flex-align: center;
              // align-items: center;
              // -webkit-box-pack: center;
              // -ms-flex-pack: center;
              width:160px;
              .prefer-con{
                width: 130px;
                margin: 0 auto;
                display: flex;
                margin-bottom:8px
              }
               img{
                  margin-right: 6px;
                  width: 15px;
                  height: 15px;
                }
               .PreferList {
                 font-size: 12px;
                  color: #262626;
                 width:120px;
                  line-height: 17px;
               }
            }
            .HeaderDate {
               position: relative;
              width: 150px;
              height: 40px;
              text-align: center;
              span{
                font-size: 12px;
                color: #262626;
              }
              // p {
              //    line-height: 20px;
              //    position: absolute;
              //    top:50px;
              //    -webkit-transform:translate(0,-50%);
			        //    transform:translate(0,-50%);
              // }
            }
            .HeaderHandle {
              // display: flex;
              // align-items: center;
              // justify-content: center;
              // position: relative;
              width: 100px;
              // height: 105px;
              text-align: center;
              .HandleList {
                width:100%;
                text-align: center;
                font-size: 12px;
                color: #26A9FF;
                cursor: pointer;
                margin-bottom:8px;
              }
              .HandleList:hover {
                  opacity: 0.8;
              }
            }
        }
     }
   .tableHeader {
      padding:0 20px;
      box-sizing: border-box;
      margin:10px 0 0 0;
      .tableLi {
        float: left;
        margin-right:20px;
        font-size: 12px;
        color: #777777;
        height: 32px;
        line-height: 32px;
        text-align: center;
      }
      .tableHeaderImg ,.HeaderImg{
        width: 120px;
      }
      .tableHeaderDetail ,.HeaderDetail{
        text-align: left;
        width:calc(100% - 720px);
      }
      .tableHeaderDetail {
        padding-left:20px;
      }
      .tableHeaderStatus,.HeaderStatus {
        width:60px;
      }
      .tableHeaderPrice,.HeaderPrice {
        width: 130px;
      }
      .tableHeaderPrefer,.HeaderPrefer {
        width: 160px;
      }
      .tableHeaderDate ,.HeaderDate{
        width: 150px;
      }
      .tableHeaderHandle,.HeaderHandle {
         width: 100px;
         text-align: center;
      }
    }
  
</style>